@font-face {
	font-family: 'Segoe';
	src: url('./fonts/Segoe_UI.ttf');
}

body {
	font-family: 'Segoe';
}

	
.header {
	position:absolute;
	height:36px;
	width:100%;
}

.header_title {
	margin:4px;
	float:left;
	font-size:24px;
	font-weight:bold;
}

.progressbars {
	float:right;
	margin-top:5px;
}

.progressbar1 {
	width:120px;
	float:right;
	right:100px;

}

.progressbar2 {
	right:350px;
	width:150px;

}

.volume {
	width:70px;
}

.content {
	position:absolute;
	top:70px;
	bottom:36px;
	width: 100%;
	clear:both;
}


.steps {
	position:absolute;
	top:32px;
	left:0px;
	right:450px;
	
}



.stepno {
	position:relative;
	margin:10px;
	color:white;
	font-size:40px;
	font-weight:bold;
}

.steptext {
	color:white;
	font-size:24px;
	line-height:30pt;
	position:absolute;
	top:0px;
	left:18px;
	right:10px;
	margin:20px;
}

.stepcarousel{
	height: 370px; 
	width: 95%;
	position:absolute; 
	left:40px;
}

.sideinfotext {
	color: black;
}

.top-l {
  position: absolute;
  top: 5px;
  left: 10px;
}


.charmsmod {
	position: absolute;
	right: 0;
	top: 32px;
	bottom: 0;
	height: 100%;
	width: 450px;
}
	
.recipe_description_border {
	height:100%;
	width:60%;
	border-width:4px;
    border-style:solid;
    border-color:grey;
}

.recipe_description {
	overflow-x:hidden;
	left:0px;
	right:450px;
	margin:1px;
	height:100%;
	padding:4px;
}

.controlsets {
	position:absolute;
	height:36px;
	width:100%;
	bottom:0px;
}

.controlset1 {
	position:absolute;
	left:0;

}

.controlset2 {
	position:absolute;
	right:500px;
}

.controlset3 {
	position:absolute;
	right:0px;
}


.controlset4{
	position:absolute;
	width: 200px;
	right:200px;
}

.bottom{
	position:absolute;
	bottom: 0px;
}	